import React from "react";
import { connect } from "dva";
import { Form, Input, Select, DatePicker, Button } from "antd";
import moment from "moment";
import styles from "./Search.less";

const { Search } = Input;
const { RangePicker } = DatePicker;
const { Option } = Select;

const getConstFilters = (obj, numTypeVal = false) =>
  Object.keys(obj).map((k) => ({ text: obj[k], value: numTypeVal ? +k : k }));

const channelType = {
  create: "创建",
  edit: "编辑",
  deploy: "部署",
  copy: "复制",
  delete: "删除",
};

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 18 },
    sm: { span: 18 },
  },
};

class LogSearch extends React.Component {
  componentDidMount() {
    const { form, onRef } = this.props;
    onRef(form);
  }

  handleReset = () => {
    const { form, updateState } = this.props;
    updateState({});
    form.resetFields();
  };

  handleSumbit = () => {
    const { form, updateState } = this.props;
    form.validateFields((err, values) => {
      if (err) return;

      const { rangeTime, keyWord, action, tenantId } = values;

      let beginTime = "";
      let endTime = "";

      if (Array.isArray(rangeTime)) {
        if (rangeTime[0]) {
          beginTime = rangeTime[0].valueOf();
        }
        if (rangeTime[1]) {
          endTime = rangeTime[1].valueOf();
        }
      }

      updateState({ keyWord, action, tenantId, beginTime, endTime });
    });
  };

  render() {
    const { form, tenantList } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form
        className={styles.formcon}
        onSubmit={(e) => {
          e.preventDefault();
        }}
        {...formItemLayout}
      >
        <div gutter={24} className={styles.first}>
          <div>
            <span className={styles.label}>操作类型</span>
            <Form.Item>
              {getFieldDecorator(
                "action",
                {},
              )(
                <Select placeholder="请选择操作类型" style={{ minWidth: 250 }}>
                  {getConstFilters(channelType).map((item) => (
                    <Option key={item.value} value={item.text}>
                      {item.text}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>

          <div>
            <span className={styles.label}>操作日期</span>
            <Form.Item>
              {getFieldDecorator("rangeTime", {
                initialValue: null,
              })(
                <RangePicker
                  allowClear
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment("HH:mm:ss"), moment("HH:mm:ss")],
                  }}
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ maxWidth: 335 }}
                />,
              )}
            </Form.Item>
          </div>

          <div>
            <span className={styles.label}>流程名称</span>
            <Form.Item>
              {getFieldDecorator(
                "keyWord",
                {},
              )(
                <Search
                  placeholder="请输入流程名称"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
        </div>
        <div className={styles.second}>
          {/* <Col span={7}> */}
          <div>
            <span className={styles.label}>租户</span>
            <Form.Item>
              {getFieldDecorator(
                "tenantId",
                {},
              )(
                <Select placeholder="请选择租户" style={{ minWidth: 250 }}>
                  {tenantList.map((item) => (
                    <Option key={item.id} value={item.id}>
                      {item.tenantName}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>

          <div>
            <Button
              type="primary"
              onClick={this.handleSumbit}
              style={{ marginRight: "8px" }}
            >
              查询
            </Button>
            <Button onClick={this.handleReset}>重置</Button>
          </div>
        </div>
      </Form>
    );
  }
}

export default connect(null, (dispatch) => ({
  updateState(payload) {
    return dispatch({
      type: "log/updateState",
      payload,
    });
  },
}))(Form.create()(LogSearch));
